<template>
  <div class="career">
    <div class="list">
      <t-row :gutter="[8,0]">
        <t-col v-for="i in list" :key="i.id" :span="6">
          <t-card :bordered="false">
            <div class="whole">
              <div class="img">
                <img :src=i.src>
              </div>
              <div class="card-r" >
                <span class="name">{{i.name}}</span>
                <span class="desc" :title=i.desc>{{i.desc}}</span>
              </div>
            </div>
          </t-card>
        </t-col>
      </t-row>
      <!-- 底部分页 -->
      <t-pagination :total="total"
      showPageNumber
      :showPageSize="false"
      :totalContent="false"
      showPreviousAndNextBtn
      @current-change="onCurrentChange"
      @change="onChange" />
    </div>
    <div class="right">
      <div class="now duiqi">
        <h3>近期上线</h3>
        <a class="right-a" href="javascript:;">教练员</a>
        <a class="right-a" href="javascript:;">整理收纳师</a>
        <a class="right-a" href="javascript:;">海洋工程技术人员</a>
        <a class="right-a" href="javascript:;">测绘和地理信息工程技术人员</a>
        <a class="right-a" href="javascript:;">宠物摄影师</a>
        <a class="right-a" href="javascript:;">心理医生</a>
        <a class="right-a" href="javascript:;">大数据工程技术人员</a>
      </div>
      <div class="hot duiqi">
        <h3>热门职业</h3>
        <a class="right-a" href="javascript:;">互联网产品经理</a>
        <a class="right-a" href="javascript:;">计算机软件工程师</a>
        <a class="right-a" href="javascript:;">小学教师</a>
        <a class="right-a" href="javascript:;">人力资源管理人员</a>
        <a class="right-a" href="javascript:;">会计人员</a>
        <a class="right-a" href="javascript:;">销售代表</a>
        <a class="right-a" href="javascript:;">机械工程技术人员</a>
        <a class="right-a" href="javascript:;">平面设计师</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['showSearch'],
  data () {
    return {
      list: [
        {
          id: 1,
          src: 'https://t1.chei.com.cn/xzpt/survey/cdn/showimg/gtrszcg0v7plik84.jpeg',
          name: '银行客户代表',
          desc: '银行客户代表可说是银行与客户交流的桥梁，工作主要是以客户为中心，处理客户存贷款及其它中间业务，并负责维护客户关系。但如果想成为出色的银行客户代表，就要有较强的公关能力和系统的营销策略，强烈的服务意识，能够积极调动商业银行的各项资源为客户提供全方位、一体化的服务。',
          tag: '金融/贸易'
        },
        {
          id: 2,
          src: 'https://t1.chei.com.cn/xzpt/survey/cdn/showimg/m8y5dkl5qroroi8c.jpeg',
          name: '外贸人员',
          desc: '外贸人员，狭义是指外贸销售员，也叫外销员。广义来说，还包括单证员、跟单员、报检员、报关员。',
          tag: '金融/贸易'
        },
        {
          id: 3,
          src: 'https://t1.chei.com.cn/xzpt/survey/cdn/showimg/zxy6dvh6omcduw5a.jpeg',
          name: '青年创业者',
          desc: '年龄在16岁至34岁之间的大学生或大学毕业后的青年，在各个领域，通过发现和识别商业机会、组织各种资源、提供产品和服务，以创造价值的过程的人员。由于大学生及大学毕业生的工作经验、资本实力有限，这个群体的创业起点相对要低，创业年限较短，创业活动既包括创建一个新企业，也包括开设一家商铺、网店。',
          tag: '青年创业者'
        },
        {
          id: 4,
          src: 'https://t1.chei.com.cn/xzpt/survey/cdn/showimg/jz3p7nuv0g42g0hj.jpeg',
          name: '移动客户端开发工程师',
          desc: '移动客户端开发工程师是进行手机应用程序开发、手机视频播放器开发、手机游戏开发、SIM卡应用开发等一系列开发设计并提供现场技术支持的专业技术人员。今天，在移动运营商、手机厂商、互联网巨头的重视下，手机软件已然成为了一座金矿。手机软件的开发也从过去单一的短信、彩信、WAP功能，延伸覆盖了包括IM、浏览器、电子书阅读、手机杂志阅读、RSS阅读、杀毒软件、手机下载、游戏等等在内的多种应用种类。有人说，手机软件可以拯救移动互联网。手机应用开发的平台主要有Android、iOS、BlackBerry、Windows Phone等。',
          tag: '互联网/通信'
        },
        {
          id: 5,
          src: 'https://t1.chei.com.cn/xzpt/survey/cdn/showimg/9nd0c6k0o85s0dul.jpeg',
          name: '风景园林工程技术人员',
          desc: '从事以园林艺术、环境生态、园林建筑和园林工程为综合基础的风景区及各类型城镇园林的总体规划和设计、施工的工程技术人员。',
          tag: '建筑/工程'
        }
      ],
      total: 10,
      current: 12,
      pageSize: 5,
      value: ''
    }
  },
  methods: {
    onCurrentChange (current, pageInfo) {
      console.log('Current Page', this.current, current, pageInfo)
    },
    onChange (pageInfo) {
      console.log('Page Info: ', pageInfo)
    }
    // toDetail (e) {
    //   console.log(this.search)
    //   if (e.tag === '建筑/工程') {
    //     this.$router.push('/Bd-D')
    //   }
    // }
  },
  watch: {
    showSearch (val) {
      this.value = val
      var newList = this.list.filter(item => item.name.indexOf(this.value) > -1)
      console.log(newList)
      this.list = newList
    }
  }
}
</script>

<style scoped>
@import url('../../../assets/career.css');
</style>
